<template>
	<view>
		<u-navbar :back-text="navBackText" title="投票"></u-navbar>
		<view class="box">
			<u-form :model="form" ref="uForm" label-width="200">
				<view class="content">
					<u-form-item label="標題" :label-style="labelStyle"><u-input v-model="form.title" placeholder="輸入標題" :clearable="false"/></u-form-item>
					<u-input v-model="form.content" type="textarea" height="300" :custom-style="textareaStyle" placeholder="請輸入文字内容" :clearable="false"/>
					<u-upload ref="uUpload" :action="action" :auto-upload="true" :file-list="fileList" :max-size="5 * 1024 * 1024" max-count="9"></u-upload>
				</view>
				<u-gap height="20" bg-color="rgb(247,247,247)"></u-gap>
				<view class="content">
					<u-form-item v-for="(item,index) in form.votingOptions" :key="index">
							<view class="optionItem">
								<text class="optionText">{{index+1}}</text>
								<text class="optionText">選項内容</text>
								<u-input v-model="form.votingOptions[index].content" placeholder="輸入内容" :clearable="false"/>
							</view>
							<u-icon slot="right" name="minus-circle-fill" :custom-style="rightIconStyle" @click="delOption(index)"></u-icon>
					</u-form-item>
				</view>
				<view class="addOptionBtnStyle">
					<u-button type="primary" shape="circle" @click="addOption"><u-icon name="plus-circle-fill" size="38" margin-right="20"></u-icon>添加選項</u-button>
				</view>
				<view class="content">
					<u-form-item label="是否可多選"><u-switch slot="right" v-model="isMultiple" active-color="#19be6b"  active-value="1" inactive-value="0" @change="changeMul"></u-switch></u-form-item>
					<u-form-item label="是否允許匿名"><u-switch slot="right" v-model="isAnonymous" active-color="#19be6b"  active-value="1" inactive-value="0" @change="changeAno"></u-switch></u-form-item>
					<u-form-item label="截止時間" :label-style="labelStyle" right-icon="arrow-down-fill" >
						<u-input v-model="form.endTime" :disabled="true" placeholder="請選擇截止時間" input-align="end"  @click="showPicker"/>
						<u-picker mode="time" v-model="show" :params="params" title="截止時間" @confirm="pickerConfirmHandle"></u-picker>
					</u-form-item>
				</view>
			</u-form>
			<u-button type="success" @click="submit()" :ripple="true">發佈投票</u-button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navBackText: "",
				action: "https://localhost:7071/files/upload",
				isMultiple: false,
				isAnonymous: false,
				// 用于图片回显
				fileList: [],
				form: {
					// 选项
					classes: [{id: "32"}],
					votingOptions:[
						{
							content: ""
						},
						{
							content: ""
						}
					],
					isMultiple: 0,
					isAnonymous: 0,
					endTime: ""
				},
				labelStyle: {
					color: "rgb(155,155,155)",
					fontSize: "28rpx"
				},
				textareaStyle: {
					backgroundColor: "rgb(238,238,238)",
					padding: "25rpx",
					magrin: "20rpx 0"
				},
				rightIconStyle: {
					color: "rgb(252,73,62)",
					fontSize: "23px"
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				show: false
			}
		},
		methods: {
			submit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				// 如果您不需要进行太多的处理，直接如下即可
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				this.form.votingPhotos = files.map(file => {
					return {url: file.response ? file.response.data : file.url}
				})
				this.$myRequest({
					url: '/voting/' + (this.form.id ? 'update' : 'save'),
					method: 'POST',
					data: this.form
				}).then(res => {
					uni.showToast({
						title: this.form.id ? '更新成功' : '发布成功'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500)
				})
			},
			showPicker() {
				this.show = true;
			},
			clickItem(index) {
				this.sex = this.sexList[index].text;
			},
			pickerConfirmHandle(res){
				this.form.endTime = res.year+"-"+res.month+"-"+res.day+" "+res.hour+":"+res.minute
			},
			addOption(){
				this.form.votingOptions.push(
					{
						content: ""
					}
				)
			},
			delOption(index){
				this.form.votingOptions.splice(index,1)
			},
			changeMul(status) {
				this.form.isMultiple = status
			},
			changeAno(status) {
				this.form.isAnonymous = status
			},
		},
		onLoad(option) {
			this.navBackText = option.className
			if(option.classId) this.classes=[{id: option.classId}]
			if(option.id){
				 this.form.id = option.id
				 this.$myRequest({
					 url: "/voting/edit/"+option.id,
				 }).then(res => {
					 this.form = res.data.data
					 this.isAnonymous = this.form.isAnonymous ? true : false
					 this.isMultiple = this.form.isMultiple ? true : false
					 this.fileList = this.form.votingPhotos
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myTextarea{
		background-color: rgb(238,238,238);
		padding: 25rpx;
	}
	.box{
		height: 100%;
		padding-top: 10rpx;
		background-color: rgb(247,247,247);
		.content{
			background-color: #fff;
			padding: 0 25rpx;
			.optionItem{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.optionText:nth-child(1){
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					background-color: rgb(254,174,0);
					border-radius: 50%;
					text-align: center;
					margin-right: 35rpx;
					color: white;
				}
				.optionText:nth-child(2){
					color: rgb(155,155,155);
					margin-right: 30rpx;
					font-size: 32rpx;
				}
			}

		}
		.addOptionBtnStyle{
			padding: 40rpx 100rpx;
		}
	}
</style>
